<template>
	<view :style="[{paddingTop:CustomBar+'px'}]">
		<cu-custom bgColor="bg-white" :isBack="true" fatherCss="box-shadow:none">
			<block slot="backText"></block>
			<block slot="content">好友大作战</block>
		</cu-custom>
		<view class="head">
			<view class="first-show">
				<view class="count-down" v-if="!isCountDown">
					<view class="title-count">
						距离活动结束还有：
					</view>
					<view class="title-countdown">
						<tui-countdown v-if="showCountDown" :time.sync="timer" color="#e41f19" bcolor="#e41f19" coloncolor="#e41f19" @end="endOfTime"></tui-countdown>
					</view>
				</view>
				<view class="count-down down-text" v-if="isCountDown">
					{{downTimeText}}
				</view>
				<view class="rules" @click="showRuleNew">
					活动规则
				</view>
			</view>
			<view class="shops-info">
				<image class="imgs" :src="list_data.shop_image" mode=""></image>
				<view class="info">
					<view class="">
						{{list_data.name}}
					</view>
					<view class="text-cut">
						{{list_data.summary}}
					</view>
					<view class="">
						消费助好礼 · 抽奖赢免单
					</view>
					<view class="">
						{{list_data.address}}
					</view>
				</view>
				<image @click='goShop' :data-businessId="list_data.business_id" :data-industryId="list_data.industry_id" src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/%E5%85%8D%E5%8D%95%E9%80%9AApp/cheatin-top-share1.png"
				 class="go-shop" mode=""></image>
			</view>
		</view>
		<!-- 奖品池 -->
		<view class="prize-content">
			<view class="align-content">
				<view class="prize-ref">
					<!-- 奖品 -->
					<view class="gift">
						<view class="item" v-for="(item,index) in presentNode" :key="index" @click="showSwiperNew" :data-index="index">
							<image :src="item.image" mode=""></image>
							<view>{{item.product_name}}</view>
						</view>
					</view>
					<view class="progress-show">
						<view class="show" id="progress" :style="[{width:progressWidth+'px'}]">
							<view class="node" v-for="(item,index) in puzzleLeft" :class="[item.isLight?'active':'',item.isBig?'active big':'']"
							 :key="index" :style="[{left: item.left+'px'}]"></view>
						</view>
						<view class="pro-light" :style="[{width:lightWidth+'px'}]"></view>
					</view>
					<view class="is-draw">
						<view class="item" v-for="(item,index) in presentNode" :key="index">
							<view class="top">
								<image src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/%E5%85%8D%E5%8D%95%E9%80%9AApp/puzzle-icon.png"
								 mode=""></image>
								<text>x{{item.help_chip_number}}</text>
							</view>
							<view class="bottom" v-if="(index<nowIndex || nowIndex==-1) && isMyOrder" @click="getGift" :data-id="item.id">
								立即领取
							</view>
							<!-- <view class="bottom" style="border: none" v-if="!isMyOrder"></view> -->
						</view>
					</view>
					<view class="at-present">
						<text v-if="needPuzzle>0">当前已集齐</text>
						<image v-if="needPuzzle>0" src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/%E5%85%8D%E5%8D%95%E9%80%9AApp/puzzle-icon.png"
						 mode=""></image>
						<text v-if="needPuzzle>0">x{{needPuzzle}}</text>
						<text v-if="needPuzzle==0">寻找好友助力抽取拼图碎片~</text>
					</view>
					<view class="invatation" v-if="isMyOrder" @click="showShare">
						助力免费领
					</view>
					<view class="invatation" v-if="isCheating && !isMyOrder" @click="goHome">
						我也要参与助力免费领
					</view>
					<view class="invatation" @click="drawLotteryNew" v-if="!isCheating && !isMyOrder">
						助好友一臂之力
					</view>
					<view class="still-puzzle" v-if="stillNeedPuzzle!='0'">
						<text>距离下一个奖品，还差</text>
						<image src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/%E5%85%8D%E5%8D%95%E9%80%9AApp/puzzle-icon.png" mode=""></image>
						<text>x{{stillNeedPuzzle}}</text>
					</view>
					<view class="still-puzzle" v-if="stillNeedPuzzle=='0'">
						<text>您的拼图碎片已集齐~</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 记录 -->
		<view class="record-new">
			<view class="align-new">
				<view class="record-head">
					<view class="">
						好友贡献榜
					</view>
				</view>
				<view class="record-list">
					<view class="record-item" v-for="(item,index) in beCheatingList" :key="index">
						<image :src="item.headimg" mode=""></image>
						<view class="">
							<view class="name text-cut">{{item.user_name}}</view>
							<view class="time">{{item.create_time}}</view>
						</view>
						<view class="">
							<image src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/%E5%85%8D%E5%8D%95%E9%80%9AApp/puzzle-icon.png" mode=""></image>
							<text>x{{item.number}}</text>
						</view>
					</view>
				</view>
				<view class="left-radius" v-if="logList.length>0"></view>
				<view class="right-radius" v-if="logList.length>0"></view>
				<view class="left-rect" v-if="logList.length>0"></view>
				<view class="right-rect" v-if="logList.length>0"></view>
			</view>
		</view>
		<!-- 滚动公告 -->
		<view class="record-new reco-tipps" v-if="logList.length>0">
			<view class="align-new">
				<view class="record-head">
					<view class="">
						助力免费拿
					</view>
					<image src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/list-of-friends2.png" mode=""></image>
				</view>
				<view class="swiper-y">
					<swiper :indicator-dots="false" vertical :autoplay="true" :interval="3000" circular :duration="1000">
						<swiper-item v-for="(item,index) in logList" :key="index">
							<view class="swiper-item">
								<view class="goods-items" v-for="(log,i) in item" :key="i">
									<image :src="log.image" mode="" class="good-img"></image>
									<view class="">
										<text class="">{{log.product_name}}</text>
										<text class="" v-if="log.sales>0">已送出{{log.sales}}件</text>
									</view>
									<view class=""></view>
									<view class="">
										<view class="">
											<image :src="log.image" mode=""></image>
											<text>{{log.user_name}}</text>
										</view>
										<view class="">
											已领取
										</view>
									</view>
								</view>
							</view>
						</swiper-item>
					</swiper>
				</view>
				<view class="left-radius bottom-left" v-if="logList.length>0"></view>
				<view class="right-radius bottom-right" v-if="logList.length>0"></view>
			</view>
		</view>
		<!-- 是否属于盟 -->
		<view class="record-new" v-if="isMeng">
			<view class="align-new is-meng">
				<view class="record-head">
					<text>联盟臻选</text>
				</view>
				<view class="meng-shops">
					<view class='shops-item' v-for="(item,index) in shopList" :key="index" @click="nav" :data-url="'/pages/generalDetail?busId='+item.id">
						<image class="shops-img" :src="item.shop_image" mode=""></image>
						<view class="coom">
							<view class="text-cut">
								{{item.name}}
							</view>
							<view class="">
								<view class="">
									<text>已售{{item.consume_number}}</text>
									<text>{{item.industry_name}}</text>
								</view>
								<view class="c_address">
									{{item.distance}}
								</view>
							</view>
							<view class="tags">
								<text v-for="(tag,i) in item.tags" :key="i">{{tag}}</text>
							</view>
							<view class="add">
								<tui-icon :name="'gps'" :size="'13'" :color="'#333333'"></tui-icon>
								<view class="text-cut">
									{{item.address}}
								</view>
							</view>
						</view>
						<view class="posit" v-if="index<3">
							<text>NO.</text>
							<text>{{index+1}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 规则 -->
		<view class="bg-black-layer" v-if="ruleShow" :style="[{height: scrollH+'px'},{paddingTop:'230rpx'}]">
			<view class="content" :animation="animationData">
				<image class="image" src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/%E5%85%8D%E5%8D%95%E9%80%9AApp/gift-box.png"
				 mode=""></image>
				<view class="info-text">
					<view class="tit-l">
						一、活动规则
					</view>
					<view class="p" style="margin-top: 10rpx;">
						1.参与方式：门店消费成功后邀请好友助力拼图碎片拿大奖，好友也会随机获得商城特权卡
					</view>
					<view class="p">
						2.助力有效期：助力发起后24小时内
					</view>
					<view class="p">
						3.奖品规格：邀请好友越多，获得的拼图碎片越多，就越容易获得最终大奖(奖品以实际店铺情况为准)；拼图碎片有最高额度限制，如您在活动结束前领取已获得的奖品，助力活动将提前终止
					</view>
					<view class="tit-l">
						二、领取说明
					</view>
					<view class="p" style="margin-top: 10rpx;">
						1.领取要求：满足领取的助力订单，即可领取(一旦领，活动将自动终止)
					</view>
					<view class="p">
						2.领取方法：在助力活动页点击“立即领取”，红包将在3-5个工作日自动返至您在掌商APP绑定的微信余额中；其余奖品将以兑换券形式存放在【卡券中心】
					</view>
					<view class="p">
						3.奖品兑换券有限期为30天，过期失效
					</view>
					<view class="tit-l">
						三、特别说明
					</view>
					<view class="p" style="margin-top: 10rpx;">
						1.发起助力后，若出现订单未成功确认、订单取消、订单修改等情况，该笔助力无效
					</view>
					<view class="p">
						2.活动过程出，若出现因网络攻击、黑客攻击、数据泄露等原因导致活动无法正常进行，掌商有权利提前终止活动
					</view>
					<view class="p">
						3.每个用户仅限使用一个账户参与活动(同一掌商账号、手机号、移动设备、银行卡、支付账号、身份证及其他信息相同视为同一账号)
					</view>
					<view class="p">
						4.活动过程中，参与用户不得以破坏活动规则、违背活动公平原则的方式参加本次活动(如：批量注册、恶意购买、虚假分享、虚假交易等)参与用户和商户不得进行有组织的众包作弊行为，否则掌商有权取消用户、商户参与活动资格，取消领取或已经领取的现金红包、奖品的权益，必要时取消后续参与掌商任意活动的权利，并追究法律责任
					</view>
					<view class="p">
						5.掌商可能根据本活动的实际情况对活动规则进行优化或调整
					</view>
				</view>
			</view>
			<image class="close" src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/%E5%85%8D%E5%8D%95%E9%80%9AApp/close.png"
			 mode="" @click="hideRuleNew"></image>
		</view>

		<!-- 奖品轮播图 -->
		<view class="bg-black-layer" :style="[{height: scrollH+'px'}]" v-if="isSwiper">
			<view class="swiper-content" :animation="animationSwiper">
				<view class="swiper-slide">
					<swiper class="swiper" circular="true" :current="currentIndex" @change="changeSwiperNew">
						<swiper-item v-for="(item,index) in presentNode" :key="index">
							<view class="swiper-item">
								<view class="top-image">
									<image :src="item.image" mode=""></image>
								</view>
								<view class="info-swipe">
									<view class="">
										{{item.product_name}}
									</view>
									<view class="">
										<text>市场价：</text>
										<text class="text-price">{{item.ot_price}}</text>
									</view>
								</view>
							</view>
						</swiper-item>
					</swiper>
				</view>
				<view class="use-btn">
					<view class="" @click="hideSwiperNew">
						取消
					</view>
					<view class="" @click="nextSwiper">
						下一个
					</view>
				</view>
			</view>
		</view>

		<!-- 抽奖结果 -->
		<view class="bg-black-layer" :style="[{height: scrollH+'px'}]" v-if="resultShow">
			<view class="gift-result" :animation="animationResult" v-if="!noTeQuan">
				<view class="top-cill">
					<view class="pullze-num">
						<text>恭喜您帮好友贡献</text>
						<image src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/%E5%85%8D%E5%8D%95%E9%80%9AApp/puzzle-icon.png" mode=""></image>
						<text>x{{resultNumber}}</text>
					</view>
					<view class="divide"></view>
					<view class="cill-tit">
						奖励您一张云商城特权卡
					</view>
					<view class="card-red">
						<view class="">
							云商城特权卡
						</view>
						<view class="">
							最高可至<text>8折</text>
						</view>
						<view class="card-divide"></view>
						<view class="">
							<!-- 已帮你收入囊中，快去商城逛逛吧 -->
							帮你收到【云钱包-折扣卡】中
							<uni-icon size="13" type="arrowright" color="#fff"></uni-icon>
						</view>
						<image class="card-img" src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/%E5%85%8D%E5%8D%95%E9%80%9AApp/M.png"
						 mode=""></image>
					</view>
				</view>
				<view class="bottom-cill">
					<view class="bottom-btn" @click="goShopMall">
						去云商城
					</view>
				</view>
			</view>
			<view class="no-te-quan gift-result" :animation="animationResult" v-if="noTeQuan">
				<image class="no-img" src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/%E5%85%8D%E5%8D%95%E9%80%9AApp/trophy2.png"
				 mode=""></image>
				<view class="p_num">
					<text>恭喜您帮好友贡献</text>
					<image src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/%E5%85%8D%E5%8D%95%E9%80%9AApp/puzzle-icon-white.png"
					 mode=""></image>
					<text>x{{resultNumber}}</text>
				</view>
			</view>
			<image class="close" src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/%E5%85%8D%E5%8D%95%E9%80%9AApp/close.png"
			 mode="" @click="hideResult"></image>
		</view>
		<!-- 领取奖品 -->
		<view class="bg-black-layer" v-if="getGiftShow" :style="[{height: scrollH+'px'}]" @touchmove.stop.prevent="moveHandle">
			<view class="red-pack" :animation="animationGetGift">
				<view class="red-pack-nei">
					<view class="all-image">
						<view class="nei-content">
							<view>恭喜您成功领取助力奖品</view>
							<view>
								<view class="left">
									<image :src="nowGetGift.image" mode=""></image>
								</view>
								<view class="right">
									<text class="text-cut">{{nowGetGift.product_name}}</text>
									<text class="text-price text-colorP">{{nowGetGift.ot_price}}</text>
								</view>
							</view>
						</view>
						<image class="nei-bg" src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/%E5%85%8D%E5%8D%95%E9%80%9AApp/show-price.png"
						 mode=""></image>
					</view>
					<view class="bottom">
						<view class="" @click="hideGetGift">
							知道了
						</view>
						<text>可在【我的-云钱包-兑换卡】查看</text>
					</view>
				</view>
				<image class="wai-bg" src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/%E5%85%8D%E5%8D%95%E9%80%9AApp/flower.png"
				 mode=""></image>
			</view>
		</view>
		<!-- 分享助力-->
		<m-share :windowSize="windowSize" :animationLayer="animationLayer" :animationContent="animationContent" :shareShow="shareShow"
		 @hideShare="hideShare" :shareType="'cheating'" :shopsInfo="list_data" :cheatingInfo="cheatingInfo"></m-share>
	</view>
</template>

<script>
	import tuiCountdown from "@/components/thorUI/countdown.vue"
	import uniIcon from '@/components/uni-icon/uni-icon.vue'
	import mShare from "./component/m-share.vue";
	import tuiIcon from '@/components/thorUI/icon.vue'
	import {
		formatDateTime
	} from '@/utils/util.js'
	export default {
		components: {
			tuiCountdown,
			uniIcon,
			mShare,
			tuiIcon
		},
		data() {
			return {
				CustomBar: this.CustomBar,
				userInfo: '',
				business_id: '',
				isUse: false,
				isShare: false,
				background: '',
				qr: '',
				canvasShow: false,
				shareImg: "",
				isRedpacket: false,
				isAnimation: true,
				orderId: '',
				payType: '',
				downTimeText: '助力已截止',
				shareHead: '',
				shareCard: '',
				shopsImg: '',
				beCheatingList: [],
				list_data: {
					name: '',
					summary: '',
					address: '',
				},
				apiUrl: '',
				nowWidth: 0,
				zoomWidth: 0,
				nowLeft: 0,
				// 倒计时时间
				isCountDown: false,
				timer: {
					second: 0
				},
				showCountDown: false,

				// 进度条总宽度
				progressWidth: '',
				// 进度条高亮部分宽度
				lightWidth: 0,
				// 进度条各个节点的left值
				puzzleLeft: [],
				// 奖品  此处存在一个大图小图的问题
				presentNode: [],
				nowIndex: '',
				needPuzzle: '',
				stillNeedPuzzle: '',
				// 可视窗口高度
				scrollH: '',
				ruleShow: false,
				animationData: {},

				// 奖品轮播图展示
				currentIndex: 0,
				isSwiper: false,
				animationSwiper: {},

				// 助力结果
				resultShow: false,
				animationResult: {},
				noTeQuan: false,
				resultNumber: '',

				// 判断用户是否助力过
				isCheating: false,
				// 是否是订单持有者本人
				isMyOrder: false,
				// 是否已经领取过商品
				isTack: false,
				// 领取奖品
				getGiftShow: false,
				animationGetGift: {},
				nowGetGift: {},
				// 分享
				animationContent: {},
				layerHeight: 0,
				shareShow: false,
				animationLayer: {},
				windowSize: {},
				// 公告
				historyShow: false,
				historyTime: 20,
				cheatingInfo: {},
				logList: [],
				shopList: [],
				isMeng: false
			}
		},
		onLoad(options) {
			// 获取用户信息
			var userInfo = uni.getStorageSync('userInfo')
			if (!uni.getStorageSync('userInfo')) {
				let curUrl = `/${this.curUrlWithArgs()}`
				var urlWithArgs = curUrl + '?'
				for (var key in options) {
					var value = options[key]
					urlWithArgs += key + '=' + value + '&'
				}
				curUrl = encodeURIComponent(urlWithArgs)
				uni.redirectTo({
					url: `/pages/login?next=${curUrl}`,
				})
				return
			} else {
				// #ifdef H5 
				var href = window.location.href
				if (href.indexOf('code') > -1) {
					var zIndex = window.location.href.slice(window.location.href.indexOf('?'), window.location.href.indexOf('#'))
					window.location.href = window.location.href.split(zIndex).join('')
				}
				// #endif 
			}

			if (options) {
				if (options.scene) {
					if (decodeURIComponent(options.scene).indexOf('&') > -1) {
						this.orderId = decodeURIComponent(options.scene).split('&')[0]
						this.payType = decodeURIComponent(options.scene).split('&')[1]
					}
				} else {
					this.orderId = options.orderId
					this.payType = options.payType
				}
			}
			this.cheatingInfo = {
				orderId: this.orderId,
				payType: this.payType
			}
			this.userInfo = userInfo
			// 区分线上线下
			if (this.payType == 'offline') {
				this.apiUrl = '/HelpProduct/get_help_about_below'
				this.getOfflineNew()
			} else {
				// 缺少
				this.apiUrl = '/HelpProduct/get_help_about_below'
				this.getOnline()
			}
			uni.getSystemInfo({
				success: (res) => {
					this.scrollH = res.windowHeight
					this.windowSize = res
				}
			})
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#000000',
				backgroundColor: '#ffffff'
			})
		},
		methods: {
			nav(e) {
				var url = e.currentTarget.dataset.url
				if (url) {
					uni.navigateTo({
						url: url
					})
				}
			},
			checkLian() {
				var that = this
				that.$request({
					url: '/ChainShop/get_chain_shop_by_bid',
					data: {
						business_id: that.list_data.business_id,
					},
					success: res => {
						if (res.data.status == 1) {
							that.isMeng = res.data.data.flag
							if (that.isMeng) {
								that.shopList = res.data.data.b_list
							}
						}
						uni.hideLoading()
					},
					fail: () => {},
					complete: () => {}
				});
			},
			/*获取当前页带参数的url*/
			curUrlWithArgs() {
				var pages = getCurrentPages()
				var currentPage = pages[pages.length - 1]
				var url = currentPage.route
				var options = currentPage.options
				var urlWithArgs = url + '?'
				for (var key in options) {
					var value = options[key]
					urlWithArgs += key + '=' + value + '&'
				}
				urlWithArgs = urlWithArgs.substring(0, urlWithArgs.length - 1)
				return urlWithArgs
			},
			// 显示分享DOM
			showShare() {
				var that = this
				// #ifdef H5
				uni.showToast({
					title: '请点击右上分享~'
				})
				return
				// #endif
				that.shareShow = true
				var animationL = uni.createAnimation({
					duration: 200,
					timingFunction: 'ease',
				})
				animationL.opacity(1).step()
				that.animationLayer = animationL.export()
				setTimeout(function() {
					var animationC = uni.createAnimation({
						duration: 500,
						timingFunction: 'ease',
					})
					animationC.bottom(0).step()
					that.animationContent = animationC.export()
				}.bind(that), 200)
			},
			// 隐藏分享DOM
			hideShare() {
				var that = this
				var animationC = uni.createAnimation({
					duration: 500,
					timingFunction: 'ease',
				})
				animationC.bottom('-270rpx').step()
				that.animationContent = animationC.export()
				setTimeout(function() {
					var animationL = uni.createAnimation({
						duration: 200,
						timingFunction: 'ease',
					})
					animationL.opacity(0).step()
					that.animationLayer = animationL.export()
					that.shareShow = false
				}.bind(that), 500)
			},
			// 去商城
			goShopMall() {
				uni.switchTab({
					url:'/pages/tabBar/cloudMall'
				})
			},
			// 领取商品
			getGift(e) {
				var that = this;
				var productId = e.currentTarget.dataset.id
				var productList = this.presentNode
				var filterItem = productList.filter(item => item.id == productId)
				this.nowGetGift = filterItem[0]
				if (that.isTack) {
					uni.showToast({
						title: '您已经领取过商品了~',
						icon: 'none'
					})
					return
				}
				this.$request({
					url: '/HelpOrder/add_order',
					data: {
						order_id: that.orderId,
						good_id: filterItem[0].id
					},
					success: res => {
						if (res.data.status == 1) {
							that.getGiftShow = true
							that.isTack = true
							var animation = uni.createAnimation({
								duration: 500,
								timingFunction: 'ease',
							})
							animation.scale(1.1).step()
							setTimeout(function() {
								animation.scale(1).step()
								that.animationGetGift = animation.export()
							}.bind(this), 300)
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			hideGetGift() {
				var that = this
				var animation = uni.createAnimation({
					duration: 500,
					timingFunction: 'ease',
				})
				setTimeout(function() {
					animation.scale(1).step()
					this.animationGetGift = animation.export()
					this.getGiftShow = false
				}.bind(this), 300)
			},
			// 去首页
			goHome() {
				uni.switchTab({
					url: '/pages/tabBar/home'
				})
			},
			// 助力
			drawLotteryNew() {
				var that = this
				this.$request({
					url: '/HelpLog/add_log',
					data: {
						order_id: that.orderId
					},
					success: res => {
						if (res.data.status == 1) {
							that.noTeQuan = !res.data.data.is_get
							that.resultNumber = res.data.data.number
							that.resultShow = true
							that.isCheating = true

							//添加记录
							that.beCheatingList.unshift({
								headimg: that.userInfo.headimg,
								number: res.data.data.number,
								user_name: that.userInfo.user_name,
								create_time: formatDateTime(new Date())
							})

							var animation = uni.createAnimation({
								duration: 500,
								timingFunction: 'ease',
							})
							animation.scale(1.1).step()
							setTimeout(function() {
								animation.scale(1).step()
								this.animationResult = animation.export()
							}.bind(this), 300)
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			hideResult() {
				var that = this
				var animation = uni.createAnimation({
					duration: 500,
					timingFunction: 'ease',
				})
				setTimeout(function() {
					animation.scale(1).step()
					this.animationResult = animation.export()
					this.resultShow = false
				}.bind(this), 300)
			},
			// 下一个轮播
			nextSwiper() {
				this.currentIndex++
				if (this.currentIndex > 4) {
					this.currentIndex = 0
				}
			},
			changeSwiperNew(e) {
				this.currentIndex = e.detail.current
			},
			showSwiperNew(e) {
				var that = this
				that.currentIndex = e.currentTarget.dataset.index
				that.isSwiper = true
				var animation = uni.createAnimation({
					duration: 500,
					timingFunction: 'ease',
				})
				setTimeout(function() {
					animation.opacity(1).step()
					this.animationSwiper = animation.export()
				}.bind(this), 300)
			},
			hideSwiperNew() {
				var that = this
				var animation = uni.createAnimation({
					duration: 500,
					timingFunction: 'ease',
				})
				animation.opacity(0).step()
				this.animationSwiper = animation.export()
				setTimeout(function() {
					that.isSwiper = false
				}.bind(this), 300)
			},
			// 显示规则dom
			showRuleNew() {
				var that = this
				that.ruleShow = true
				var animation = uni.createAnimation({
					duration: 500,
					timingFunction: 'ease',
				})
				setTimeout(function() {
					animation.opacity(1).step()
					this.animationData = animation.export()
				}.bind(this), 300)
			},
			// 隐藏规则dom
			hideRuleNew() {
				var that = this
				var animation = uni.createAnimation({
					duration: 500,
					timingFunction: 'ease',
				})
				animation.opacity(0).step()
				this.animationData = animation.export()
				setTimeout(function() {
					that.ruleShow = false
				}.bind(this), 300)
			},
			moveHandle() {},
			goShop(e) {
				var busId = e.currentTarget.dataset.businessid
				uni.navigateTo({
					url: '/pages/generalDetail?busId=' + busId
				})
			},
			SplitArray(N, Q) {
				var R = [],
					F;
				for (F = 0; F < Q.length;) R.push(Q.slice(F, F += N))
				return R
			},
			getOfflineNew() {
				var that = this;
				this.$request({
					url: that.apiUrl,
					data: {
						order_id: that.orderId
					},
					success: res => {
						if (res.data.status == 1) {
							var result = res.data
							// 判断用户是否助力过
							var isHas = result.data.log.filter(item => item.user_id == that.userInfo.id)
							that.isCheating = isHas.length == 0 ? false : true
							// 助力历史记录
							that.beCheatingList = result.data.log
							// 商户详情
							that.list_data = result.data.business_info
							// 商品详情
							that.presentNode = result.data.help_product
							// 判断是否是助力者本人
							that.isMyOrder = result.data.is_flag
							// 是否已经领取过商品
							that.isTack = result.data.is_take == 0 ? false : true
							// 助力的卡片数
							that.needPuzzle = result.data.user_chip_number
							var needPuzzle = result.data.user_chip_number
							// 公告
							if (result.data.help_order_list.length > 2) {
								that.logList = that.SplitArray(2, result.data.help_order_list)
							} else if (result.data.help_order_list.length == 1) {
								var log = []
								log.push(result.data.help_order_list)
								that.logList = log
							}
							// 是否为联盟商家
							that.checkLian()
							setTimeout(function() {
								uni.createSelectorQuery().select('#progress').fields({
									size: true
								}, (rect) => {
									var progressWidth = rect.width
									var scale = parseInt(progressWidth / that.presentNode.length)
									var puzzleLeft = []
									var presentNode = that.presentNode
									// 计算出下一个可以领取奖品的下标
									var nowIndex = that.presentNode.findIndex(item => needPuzzle < item.help_chip_number)
									// debugger
									that.nowIndex = nowIndex
									for (let i = 0; i < 5; i++) {
										puzzleLeft.push({
											left: (scale * i) + scale / 2,
											isLight: nowIndex == -1 ? true : i < nowIndex,
											isBig: nowIndex == -1 && i == 4 ? true : i == nowIndex
										})
									}
									that.puzzleLeft = puzzleLeft
									that.progressWidth = progressWidth - (scale / 2)
									// 此处特殊判断几种情况
									// 1，助力碎片数超过最大奖品需要碎片数
									// 2，助力还没开始情况
									// 3，助力不足第一个奖品的情况
									// 4，其他
									if (nowIndex == -1) {
										var increaseWidth = that.progressWidth
										that.lightWidth = increaseWidth
										that.stillNeedPuzzle = '0'
									} else if (needPuzzle == 0) {
										that.lightWidth = 0
										that.stillNeedPuzzle = presentNode[nowIndex].help_chip_number
									} else if (nowIndex == 0) {
										var increaseWidth = (puzzleLeft[nowIndex].left * needPuzzle) / (presentNode[nowIndex].help_chip_number);
										that.lightWidth = increaseWidth;
										that.stillNeedPuzzle = presentNode[nowIndex].help_chip_number - needPuzzle
									} else {
										var increaseWidth = ((puzzleLeft[nowIndex].left - puzzleLeft[nowIndex - 1].left) * (needPuzzle -
											presentNode[nowIndex - 1].help_chip_number)) / (presentNode[nowIndex].help_chip_number -
											presentNode[
												nowIndex - 1].help_chip_number)
										that.lightWidth = puzzleLeft[nowIndex - 1].left + increaseWidth
										that.stillNeedPuzzle = presentNode[nowIndex].help_chip_number - needPuzzle
									}

								}).exec();
							}, 500)

							var nowTime = new Date().getTime() / 1000
							// 倒计时
							var times = result.data.end_time - nowTime

							if (nowTime > result.data.end_time) {
								that.isCountDown = true
								that.downTimeText = '活动已结束'
								return
							}
							if (times > 0) {
								var timer = {
									second: times
								}
								that.timer = timer
								this.showCountDown = true
							} else {
								that.isCountDown = true
								that.downTimeText = '活动已结束'
							}
							uni.hideLoading()
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			// 倒计时结束
			endOfTime(e) {
				this.downTimeText = '活动已截止'
				this.isCountDown = true
			}
		},
		onShareAppMessage(res) {
			var titleText = '帮我助力赢好礼'
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: titleText,
				path: '/pages/cheatingDetail?orderId=' + this.orderId + '&payType=' + this.payType,
				imageUrl: "https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/%E5%85%8D%E5%8D%95%E9%80%9AApp/share-cheatig.png",
				success: (res) => {
					console.log("转发成功", res);
				},
				fail: (res) => {
					console.log("转发失败", res);
				}
			}
		}
	}
</script>

<style>
	page {
		background: #f5f5f5;

	}

	.title-countdown .tui-countdown-item {
		width: 48rpx !important;
		height: 48rpx !important;

	}

	.title-countdown .tui-countdown-item>view {
		font-weight: bold !important;
		font-size: 30rpx !important;
		color: #f34930 !important;
	}

	.title-countdown .tui-countdown-colon {
		color: #fff !important;
	}
</style>
<style scoped>
	.head {
		width: 100%;
		height: 480rpx;

		background: url('https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/%E5%85%8D%E5%8D%95%E9%80%9AApp/cheatin-top-bg.png') no-repeat;
		background-size: 100% 100%;
		padding-top: 30rpx;
		box-sizing: border-box;
	}

	.first-show {
		width: 100%;
		margin-bottom: 20rpx;
		height: 48rpx;
		display: flex;
		align-items: center;
		padding: 0 24rpx;
		box-sizing: border-box;
	}

	.first-show .count-down {
		flex: 1;
		display: flex;
		align-items: center;
	}

	.title-count {
		font-size: 30rpx;
		color: #fff;
	}

	.title-countdown {
		height: 48rpx;
	}

	.rules {
		width: 100rpx;
		height: 35rpx;
		line-height: 35rpx;
		text-align: center;
		font-size: 24rpx;
		color: #ffffff;
		border-bottom: solid 1rpx #fff;
	}

	.shops-info {
		width: 702rpx;
		height: 320rpx;
		background-color: #ffffff;
		border-radius: 8rpx;
		margin: 0 auto;
		position: relative;
		padding: 20rpx;
		box-sizing: border-box;
		display: flex;
	}

	.imgs {
		width: 280rpx !important;
		height: 280rpx;
		border-radius: 8rpx;
		margin-right: 20rpx;
	}

	.shops-info .info {
		flex: 1;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.shops-info .info>view {}

	.shops-info .info>view:nth-child(1) {
		font-size: 30rpx;
		line-height: 50rpx;
		letter-spacing: 1rpx;
		font-weight: bold;
		color: #333;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.shops-info .info>view:nth-child(2) {
		font-size: 26rpx;
		line-height: 45rpx;
		font-weight: bold;
		max-width: 400rpx;
	}

	.shops-info .info>view:nth-child(3) {
		font-size: 26rpx;
		color: #f34930;
		font-weight: bold;
	}

	.shops-info .info>view:nth-child(4) {
		max-width: 400rpx;
		font-size: 26rpx;
		font-weight: bold;
		color: #666666;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.shops-info .go-shop {
		width: 298rpx;
		height: 98rpx;
		position: absolute;
		bottom: -84rpx;
		left: 50%;
		margin-left: -149rpx;
	}

	.down-text {
		color: #fff;
		font-size: 32rpx;
		font-weight: bold;
	}

	/* 奖品池 */
	.prize-content {
		width: 100%;
		padding: 50rpx 24rpx 10rpx;
		box-sizing: border-box;
		background: linear-gradient(#f34930, #ffffff, #f5f5f5);
	}

	.prize-content .align-content {
		width: 100%;
		/* height: 600rpx; */
		padding: 50rpx 20rpx 5rpx;
		box-sizing: border-box;
		background: #fff;
		border-radius: 16rpx;
		box-shadow: 0 0 10rpx #ababab;
	}

	.prize-content .align-content .prize-ref {
		width: 100%;
		height: 100%;
		overflow: hidden;
	}

	.gift {
		width: 100%;
		display: flex;
		justify-content: space-between;
	}

	.gift .item {
		width: 116rpx;
		height: 176rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.gift .item image {
		width: 116rpx;
		height: 116rpx;
		border: solid 1rpx #efefef;
		border-radius: 4rpx;
	}

	.gift .item view {
		width: 100%;
		line-height: 60rpx;
		font-size: 20rpx;
		text-align: center;
		color: #333;
	}

	.progress-show {
		width: 100%;
		height: 30rpx;
		display: flex;
		align-items: center;
		position: relative;
	}

	.progress-show .show {
		width: 100%;
		height: 4rpx;
		background: #efefef;
		border-radius: 10rpx;
	}

	.pro-light {
		height: 4rpx;
		background: #f34930;
		border-radius: 10rpx;
		position: absolute;
		top: 50%;
		left: 0;
		transform: translateY(-2rpx);
		z-index: 9;
		transition: all 0.5s;
	}

	.progress-show .show .node {
		width: 12rpx;
		height: 12rpx;
		background-color: #efefef;
		position: absolute;
		top: 50%;
		transform: translateY(-6rpx);
		border-radius: 100%;
		z-index: 10;
	}

	.progress-show .show .active {
		background-color: #f34930 !important;
	}

	.progress-show .show .big {
		width: 20rpx !important;
		height: 20rpx !important;
		transform: translateY(-10rpx);
	}

	.is-draw {
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: space-between;
	}

	.is-draw .item {
		width: 116rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
	}

	.is-draw .item .top {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.is-draw .item .top image {
		width: 24rpx;
		height: 24rpx;
		margin-right: 10rpx;
	}

	.is-draw .item .top text {
		color: #333333;
		font-size: 20rpx;
	}

	.is-draw .item .bottom {
		width: 96rpx;
		height: 36rpx;
		line-height: 36rpx;
		border-radius: 4rpx;
		border: solid 1rpx #f34930;
		text-align: center;
		color: #f34930;
		font-size: 20rpx;
	}

	.at-present {
		width: 100%;
		height: 68rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.at-present image {
		width: 24rpx;
		height: 24rpx;
		margin-right: 10rpx;
		margin-left: 10rpx;
	}

	.at-present text {
		font-size: 28rpx;
		letter-spacing: 1rpx;
		color: #333333;
	}

	.invatation {
		width: 560rpx;
		height: 88rpx;
		background-color: #f34930;
		border-radius: 8rpx;
		margin: 0 auto;
		text-align: center;
		line-height: 88rpx;
		color: #fff;
		font-size: 30rpx;
	}

	.still-puzzle {
		width: 100%;
		height: 70rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.still-puzzle image {
		width: 24rpx;
		height: 24rpx;
		margin-right: 10rpx;
		margin-left: 10rpx;
	}

	.still-puzzle text {
		font-size: 24rpx;
		letter-spacing: 1rpx;
		color: #999999;
	}

	.record-new {
		width: 100%;
		padding: 10rpx 24rpx;
		box-sizing: border-box;
	}

	.align-new {
		width: 100%;
		border-radius: 16rpx;
		background: #fff;
		box-shadow: 0 0 10rpx #ababab;
		padding-bottom: 30rpx;
		position: relative;
	}

	.left-radius {
		width: 22rpx;
		height: 22rpx;
		background-color: #b36e07;
		border-radius: 100%;
		position: absolute;
		bottom: 20rpx;
		left: 20rpx;
		z-index: 1;
	}

	.bottom-left {
		top: 20rpx !important
	}

	.bottom-right {
		top: 20rpx !important
	}

	.right-radius {
		width: 22rpx;
		height: 22rpx;
		background-color: #b36e07;
		border-radius: 100%;
		position: absolute;
		bottom: 20rpx;
		right: 20rpx;
		z-index: 1;
	}

	.left-rect {
		width: 10rpx;
		height: 88rpx;
		background-image: -webkit-gradient(linear, left bottom, left top, from(#f8990b), color-stop(50%, #ffe7e4), color-stop(76%, #fcc078), to(#f8990b));
		background-image: -o-linear-gradient(bottom, #f8990b 0%, #ffe7e4 50%, #fcc078 76%, #f8990b 100%);
		background-image: linear-gradient(0deg, #f8990b 0%, #ffe7e4 50%, #fcc078 76%, #f8990b 100%);
		border-radius: 5rpx;
		position: absolute;
		bottom: -54rpx;
		left: 26rpx;
		z-index: 2;
	}

	.right-rect {
		width: 10rpx;
		height: 88rpx;
		background-image: -webkit-gradient(linear, left bottom, left top, from(#f8990b), color-stop(50%, #ffe7e4), color-stop(76%, #fcc078), to(#f8990b));
		background-image: -o-linear-gradient(bottom, #f8990b 0%, #ffe7e4 50%, #fcc078 76%, #f8990b 100%);
		background-image: linear-gradient(0deg, #f8990b 0%, #ffe7e4 50%, #fcc078 76%, #f8990b 100%);
		border-radius: 5rpx;
		position: absolute;
		bottom: -54rpx;
		right: 26rpx;
		z-index: 2;
	}

	.reco-tipps .record-head>view {
		border-radius: 16rpx 0 0 0;
		background: #f8990b !important;
		color: #fff !important;
	}

	.reco-tipps .record-head image {
		width: 385rpx;
		height: 88rpx;
		border-radius: 0 16rpx 0 0;
	}

	.align-new .record-head {
		width: 100%;
		height: 88rpx;
		background-color: #f8990b;
		border-radius: 16rpx 16rpx 0 0;
		display: flex;
		justify-content: space-between;
	}

	.align-new .record-head>view {
		width: 376rpx;
		height: 88rpx;
		background: url('https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/list-of-friends.png') no-repeat;
		background-size: 100% 100%;
		/* text-align: center; */
		padding-left: 100rpx;
		box-sizing: border-box;
		line-height: 88rpx;
		font-size: 30rpx;
		color: #c3790b;
	}


	.record {
		width: 100%;
		padding: 0 24rpx 20rpx;
		box-sizing: border-box;
		/* margin-top: 10rpx; */
		max-height: 800rpx;
		overflow-y: auto;
	}

	.record .align {
		width: 100%;
		/* height: 600rpx; */
		padding: 20rpx;
		box-sizing: border-box;
		background: #fff;
		border-radius: 4rpx;
	}

	.align .title {
		width: 100%;
		line-height: 70rpx;
		text-align: center;
		color: #333333;
		font-size: 30rpx;
	}

	.record-list {
		width: 100%;
		padding: 0 40rpx;
		max-height: 800rpx;
		overflow-y: auto;
	}

	.record-list .record-item:nth-child(1) {
		margin-top: 20rpx
	}

	.record-item {
		width: 100%;
		height: 64rpx;
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		box-sizing: border-box;
	}

	.record-item image {
		width: 64rpx;
		height: 64rpx;
		margin-right: 20rpx;
		border-radius: 100%;
	}

	.record-item>view:nth-child(2) {
		flex: 1;
		height: 64rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.record-item>view:nth-child(2) .name {
		color: #333333;
		font-size: 28rpx;
		max-width: 400rpx;
	}

	.record-item>view:nth-child(2) .time {
		color: #999;
		font-size: 24rpx;
	}

	.record-item>view:nth-child(3) {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.record-item>view:nth-child(3) image {
		width: 24rpx;
		height: 24rpx;
		margin-right: 10rpx;
		margin-left: 10rpx;
	}

	.record-item>view:nth-child(3) text {
		font-size: 24rpx;
		letter-spacing: 1rpx;
		color: #999999;
	}

	.bg-black-layer {
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, .6);
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		box-sizing: borde-box;
		z-index: 1025;
	}

	.bg-black-layer .content {
		width: 640rpx;
		height: 760rpx;
		padding-top: ;
		box-sizing: border-box;
		position: relative;
		background: #feebc1;
		padding: 63rpx 20rpx 30rpx;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		opacity: 0;
	}

	.bg-black-layer .content .info-text {
		flex: 1;
		overflow-y: auto;
	}

	.bg-black-layer .content .image {
		height: 270rpx;
		width: 580rpx;
		display: block;
		position: absolute;
		top: -232rpx;
		left: 50%;
		transform: translateX(-290rpx);
	}

	.bg-black-layer .content .tit-l {
		line-height: 34rpx;
		font-size: 28rpx;
		color: #b8730c;
		font-weight: bold;
	}

	.bg-black-layer .content .p {
		line-height: 36rpx;
		font-size: 24rpx;
		color: #b8730c;
		margin-bottom: 10rpx;
	}

	.close {
		width: 50rpx;
		height: 112rpx;
		margin-top: 30rpx
	}

	/* 轮播商品展示 */
	.swiper-content {
		width: 560rpx;
		height: 850rpx;
		background: #fff;
		border-radius: 8rpx;
		box-shadow: 0 0 8px #fff;
		display: flex;
		flex-direction: column;
		opacity: 0;
	}

	.swiper-content .swiper-slide {
		border-radius: 8rpx 8rpx 0 0;
		width: 100%;
		flex: 1;
	}

	.swiper-content .swiper-slide swiper {
		height: 100%;
	}

	.swiper-item {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.swiper-item .top-image {
		width: 560rpx;
		height: 560rpx;
		background-color: #f34930;
		border-radius: 8rpx 8rpx 0rpx 0rpx;
		box-sizing: border-box;
		padding: 20rpx;
	}

	.swiper-item .top-image image {
		width: 100%;
		height: 100%;
		border-radius: 8rpx;
	}

	.swiper-item .info-swipe {
		flex: 1;
		display: flex;
		flex-direction: column;
		padding: 10rpx 20rpx 10rpx;
		box-sizing: border-box;
		justify-content: space-between;
	}

	.swiper-item .info-swipe>view:nth-child(1) {
		font-size: 30rpx;
		font-weight: 500;
		color: #333;
		line-height: 46rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.swiper-item .info-swipe>view:nth-child(2) text:nth-child(1) {
		font-size: 28rpx;
		color: #333;
		/* margin-right: 10rpx; */
	}

	.swiper-item .info-swipe>view:nth-child(2) text:nth-child(2) {
		font-size: 32rpx;
		color: #333;
		font-weight: bold;
	}

	.swiper-content .use-btn {
		padding: 30rpx 20rpx;
		width: 100%;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		border-radius: 0 0 8rpx 8rpx;
	}

	.swiper-content .use-btn>view {
		width: 240rpx;
		height: 64rpx;
		border: solid 1rpx #f34930;
		box-sizing: border-box;
		text-align: center;
		line-height: 64rpx;
		color: #f34930;
		border-radius: 8rpx;
	}

	.swiper-content .use-btn>view:nth-child(2) {
		color: #fff;
		background: #f34930;
	}

	/* 抽奖结果 */
	.gift-result {
		width: 600rpx;
		height: 635rpx;
		position: relative
	}

	.gift-result .top-cill {
		width: 560rpx;
		height: 430rpx;
		border-radius: 20rpx 20rpx 0 0;
		background: url('https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/%E5%85%8D%E5%8D%95%E9%80%9AApp/card-bg3.png') no-repeat;
		background-size: 100% 100%;
		position: relative;
		overflow: hidden;
		margin: 0 auto;
		padding-top: 20rpx;
		box-sizing: border-box;
	}

	/* .gift-result .top-cill::before {
		content: "";
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		display: block;
		background: rgba(0, 0, 0, .6) !important;
		position: absolute;
		top: 115rpx;
		left: -20rpx;
		transform: translateY(-50%);
	}
	
	.gift-result .top-cill::after {
		content: "";
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		display: block;
		background: rgba(0, 0, 0, .6) !important;
		position: absolute;
		top: 115rpx;
		right: -20rpx;
		transform: translateY(-50%);
	}
 */
	.gift-result .top-cill .pullze-num {
		line-height: 90rpx;
		text-align: center;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.gift-result .top-cill .pullze-num text {
		font-size: 36rpx;
		color: #f34930;
		font-weight: bold;
	}

	.gift-result .top-cill .pullze-num image {
		width: 36rpx;
		height: 36rpx;
		margin-right: 10rpx;
		margin-left: 10rpx;
	}

	.gift-result .top-cill .divide {
		width: 480rpx;
		border-top: dashed 4rpx #F34930;
		margin: 8rpx auto 10rpx;
	}

	.gift-result .top-cill .cill-tit {
		line-height: 68rpx;
		text-align: center;
		width: 100%;
		font-size: 30rpx;
		letter-spacing: 1rpx;
		color: #333333;
	}

	.gift-result .top-cill .card-red {
		width: 470rpx;
		height: 200rpx;
		background-image: linear-gradient(130deg,
			#f36c30 0%,
			#f34930 100%),
			linear-gradient(#f34930,
			#f34930);
		margin: 0 auto;
		border-radius: 8rpx;
		position: relative;
		/* overflow: hidden; */
		padding: 0 30rpx;
		position: relative;
	}

	.gift-result .top-cill .card-red>view:nth-child(1) {
		font-size: 30rpx;
		color: #fefefe;
		font-weight: bold;
		letter-spacing: 1rpx;
		line-height: 80rpx;
	}

	.gift-result .top-cill .card-red>view:nth-child(2) {
		font-size: 22rpx;
		color: #fefefe;
		letter-spacing: 1rpx;
	}

	.gift-result .top-cill .card-red>view:nth-child(2) text {
		font-weight: bold;
		font-size: 26rpx;
	}

	.gift-result .top-cill .card-red>view:nth-child(3) {
		width: 410rpx;
		border-top: dashed 2rpx #ffffff;
		margin: 17rpx auto 18rpx;
	}

	.gift-result .top-cill .card-red>view:nth-child(4) {
		font-size: 23rpx;
		letter-spacing: 1rpx;
		color: #fefefe;
		display: flex;
		align-items: center;
	}

	.gift-result .top-cill .card-red .card-img {
		width: 120rpx;
		height: 86rpx;
		opacity: .2;
		position: absolute;
		top: 20rpx;
		right: 20rpx;
	}

	.gift-result .top-cill .card-red::after {
		content: "";
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		display: block;
		background: #fff;
		position: absolute;
		top: 65px;
		right: -20rpx;
		transform: translateY(-50%);
	}

	.gift-result .top-cill .card-red::before {
		content: "";
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		display: block;
		background: #fff;
		position: absolute;
		top: 65px;
		left: -21rpx;
		transform: translateY(-50%);
	}

	.gift-result .bottom-cill {
		width: 600rpx;
		height: 435rpx;
		border-radius: 20rpx;
		background: linear-gradient(to bottom, #f34930, #f36c30);
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: -1;
		display: flex;
		justify-content: center;
		align-content: flex-end;
		margin-bottom: 30rpx;
	}

	.bottom-cill .bottom-btn {
		width: 321rpx;
		height: 73rpx;
		background-color: #ffffff;
		border-radius: 36rpx;
		font-size: 36rpx;
		line-height: 73rpx;
		letter-spacing: 2rpx;
		color: #fc3209;
		text-align: center;
		margin-top: 310rpx;
		animation: rotatefresh 1s infinite linear;
		display: inline-block;
	}

	@keyframes rotatefresh {
		50% {
			transform: scale(1.1)
		}

		100% {
			transform: scale(1);
			transition: all 0.6s;
		}
	}

	/* 无特权卡 */
	.no-te-quan {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.no-te-quan .no-img {
		width: 547rpx;
		height: 561rpx;
	}

	.no-te-quan .p_num {
		width: 400rpx;
		height: 72rpx;
		background-color: #f34930;
		position: absolute;
		top: 370rpx;
		left: 50%;
		transform: translateX(-200rpx);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.no-te-quan .p_num>image {
		width: 36rpx;
		height: 36rpx;
		margin: 0 10rpx 0 15rpx
	}

	.no-te-quan .p_num text {
		font-size: 30rpx;
		letter-spacing: 1rpx;
		color: #ffffff;
	}


	.red-pack {
		width: 564rpx;
		height: 624rpx;
		background-color: #c6240c;
		border-radius: 20rpx;
		position: relative;
	}

	.red-pack .wai-bg {
		width: 647rpx !important;
		max-width: 647rpx !important;
		height: 253rpx;
		position: absolute;
		left: -37rpx;
		top: -144rpx;

	}

	.red-pack-nei {
		width: 560rpx;
		height: 621rpx;
		background-image: linear-gradient(-30deg,
			#f23e14 0%,
			#fdb446 100%);
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		position: relative;
	}

	.red-pack-nei .all-image {
		flex: 1;
		position: relative;
	}

	.red-pack-nei .all-image .nei-content {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
	}

	.red-pack-nei .all-image .nei-content>view:nth-child(1) {
		font-size: 40rpx;
		line-height: 58rpx;
		letter-spacing: 5rpx;
		color: #ffffff;
		position: absolute;
		top: 85rpx;
		left: 0;
		text-align: center;
		width: 100%;
	}

	.red-pack-nei .all-image .nei-content>view:nth-child(2) {
		width: 400rpx;
		height: 150rpx;
		border-radius: 8rpx;
		margin: 230rpx auto;
		display: flex;
		box-sizing: 0 0 10rpx #fff;
	}

	.red-pack-nei .all-image .nei-content>view:nth-child(2) .left {
		width: 150rpx;
		height: 150rpx;
		border-radius: 8rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #ffffff;
	}

	.red-pack-nei .all-image .nei-content>view:nth-child(2) .left image {
		width: 130rpx;
		height: 130rpx;
		border-radius: 8rpx;
	}

	.red-pack-nei .all-image .nei-content>view:nth-child(2) .right {
		flex: 1;
		height: 150rpx;
		border-radius: 8rpx;
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
		padding: 20rpx;
		box-sizing: border-box;
		justify-content: space-between;
	}


	.red-pack-nei .all-image .nei-content>view:nth-child(2) .right text:nth-child(1) {
		line-height: 30rpx;
		letter-spacing: 1rpx;
		color: #b8730c;
		font-size: 24rpx;
	}

	.red-pack-nei .all-image .nei-content>view:nth-child(2) .right text:nth-child(2) {
		font-size: 20rpx;
		line-height: 24rpx;
		letter-spacing: 1rpx;
		color: #b8730c;
		text-underline: inherit;
	}

	.red-pack-nei .all-image .nei-bg {
		position: absolute !important;
		top: 0;
		left: 0;
		width: 564rpx;
		height: 444rpx;
		z-index: 0;
	}

	.red-pack-nei .bottom {
		height: 195rpx;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.red-pack-nei .bottom>view {
		width: 240rpx;
		height: 64rpx;
		background-color: #ffffff;
		box-shadow: 2rpx 4rpx 16rpx 0rpx rgba(198, 38, 13, 0.5);
		border-radius: 32rpx;
		text-align: center;
		font-size: 30rpx;
		letter-spacing: 1rpx;
		color: #c6250d;
		line-height: 64rpx;
		margin-bottom: 20rpx;
	}

	.red-pack-nei .bottom>text {
		color: #ffffff;
		text-align: center;
		font-size: 24rpx;
		letter-spacing: 1rpx;
	}

	/* 公告 */
	.swiper-history {
		padding: 0 20rpx;
		width: 100%;
		box-sizing: border-box;
	}

	.tui-notice-board {
		width: 100%;
		box-sizing: border-box;
		font-size: 28upx;
		height: 48upx;
		display: flex;
		align-items: center;
		background-color: #fff;
		border-radius: 24rpx;
		margin-bottom: 20rpx;
	}

	.tui-icon-bg {
		position: relative;
		z-index: 10;
		margin: 0 10rpx;
	}

	.tui-icon-class {
		margin-right: 12upx;
	}

	.tui-scorll-view {
		flex: 1;
		line-height: 1;
		white-space: nowrap;
		overflow: hidden;
		color: #333;
	}

	.tui-animation {
		-webkit-animation: tui-rolling 12s linear infinite;
		animation: tui-rolling 12s linear infinite;
	}

	.tui-notice {
		/* width: auto; */
		/* transform: translateX(100%); */
		color: #333;
	}

	@-webkit-keyframes tui-rolling {
		0% {
			transform: translateX(0);
		}

		100% {
			transform: translateX(-100%);
		}
	}

	@keyframes tui-rolling {
		0% {
			transform: translateX(0);
		}

		100% {
			transform: translateX(-100%);
		}
	}

	.reco-tipps .align-new {
		padding-bottom: 0 !important;
	}

	.swiper-y {
		width: 100%;
		height: 324rpx;
		padding: 0 20rpx;
	}

	.goods-items {
		width: 100%;
		padding: 20rpx 0;
		border-bottom: solid 1rpx #efefef;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.goods-items .good-img {
		width: 120rpx;
		height: 120rpx;
		border-radius: 8rpx;
		margin-right: 20rpx;
	}

	.goods-items>view:nth-child(2) {
		flex: 1;
		height: 120rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.goods-items>view:nth-child(2) text:nth-child(1) {
		max-width: 290rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		font-size: 26rpx;
		letter-spacing: 1rpx;
		color: #333333;
	}

	.goods-items>view:nth-child(2) text:nth-child(2) {
		font-size: 24rpx;
		color: #999999;
	}

	.goods-items>view:nth-child(3) {
		width: 2rpx;
		height: 72rpx;
		background-color: #efefef;
	}

	.goods-items>view:nth-child(4) {
		width: 200rpx;
		height: 120rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.goods-items>view:nth-child(4)>view:nth-child(1) {
		max-width: 180rpx;
		display: flex;
		align-items: center;

	}

	.goods-items>view:nth-child(4)>view:nth-child(1) image {
		width: 48rpx;
		height: 48rpx;
		margin-right: 10rpx;
		border-radius: 100%;
	}

	.goods-items>view:nth-child(4)>view:nth-child(1) text {
		font-size: 24rpx;
		letter-spacing: 1rpx;
		color: #333333;
		max-width: 120rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		letter-spacing: 1rpx;
	}

	.goods-items>view:nth-child(4)>view:nth-child(2) {
		font-size: 30rpx;
		margin-top: 15rpx;
		color: #c3790b;
	}

	.is-meng>.record-head {
		background: #fff !important;
		height: 76rpx;
		padding: 10rpx 20rpx;
	}

	.is-meng>.record-head text {
		font-size: 36rpx;
		line-height: 76rpx;
		letter-spacing: 2rpx;
		color: #c3790b;
		font-weight: bold;
	}

	.is-meng {
		padding-bottom: 0 !important;
	}

	.meng-shops {
		width: 100%;
		display: flex;
		flex-direction: column;
		padding: 20rpx 20rpx 0;
	}

	.shops-item {
		width: 100%;
		display: flex;
		align-items: center;
		box-shadow: 0 0 10rpx #ababab;
		border-radius: 8rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		position: relative
	}

	.shops-item .posit {
		position: absolute;
		top: 0rpx;
		left: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 40rpx;
		height: 56rpx;
		/* box-shadow: 1rpx 4rpx 8rpx 0rpx rgba(165, 20, 14, 0.5); */
		background: url('https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/pay-rank-bg.png') no-repeat;
		background-size: 100% 100%;
	}

	.shops-item .posit>text:nth-child(1) {
		font-size: 20rpx;
		color: #ffffff;
	}

	.shops-item .posit>text:nth-child(2) {
		font-size: 28rpx;
		color: #ffffff;
		font-weight: bold;
	}

	.shops-item>image {
		width: 160rpx;
		height: 160rpx;
		border-radius: 8rpx;
		margin-right: 20rpx;
	}

	.shops-item .coom {
		flex: 1;
		height: 160rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.shops-item .coom>view:nth-child(1) {
		font-size: 30rpx;
		/* line-height: 36rpx; */
		letter-spacing: 1rpx;
		color: #333333;
		max-width: 300rpx;
	}

	.shops-item .coom>view:nth-child(2) {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.shops-item .coom>view:nth-child(2)>view:nth-child(1) text {
		font-size: 24rpx;
		color: #333333;
		line-height: 30rpx;
	}

	.shops-item .coom>view:nth-child(2)>view:nth-child(1) text:nth-child(1) {
		margin-right: 20rpx;
	}

	.shops-item .coom>view:nth-child(2) .c_address {
		font-size: 24rpx;
		color: #666666;
	}

	.shops-item .coom .tags {
		display: flex;
		align-items: center;
	}

	.shops-item .coom .tags text {
		padding: 0 15rpx;
		background: rgba(243, 73, 48, .1);
		border-radius: 4rpx;
		line-height: 32rpx;
		font-size: 20rpx;
		color: #f34930;
		margin-right: 10rpx;
	}

	.shops-item .coom .add {
		display: flex;
		align-items: center;
		width: 100%;
		box-sizing: border-box;
	}

	.shops-item .coom .add>view:nth-child(1) {
		margin-right: 15rpx;
	}

	.shops-item .coom .add>view:nth-child(2) {
		flex: 1;
		line-height: 30rpx;
		font-size: 24rpx;
		color: #666666;
		max-width: 280rpx;
	}
</style>

<style></style>
